<template>
  <div>
    <div style="margin: 0 auto;width: 1200px">
      <MapAddressSelect ref="bmapAddressSelect" @confirmMapAddress="confirmMapAddress"></MapAddressSelect>
      <div style="margin: 0 auto;width: 800px">
        <el-form-item label="地图位置" style="width: 100%;margin-top: 50px" prop="address">
          <el-input type="text" placeholder="请选择地址" v-model="form.address" disabled/>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="地址经度" style="width: 100%" prop="longitude">
              <el-input v-model="form.longitude" placeholder="请选择地址" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="地址纬度" style="width: 100%" prop="latitude">
              <el-input v-model="form.latitude" placeholder="请选择地址" disabled/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="地址名称" style="width: 100%" prop="url">
              <el-select
                  value-key="id"
                  v-model="form.urlName"
                  clearable
                  filterable
                  placeholder="请选择地址名称"
                  class="product-input"
                  @change="productSelect"
                  allow-create
              >
                <el-option
                    v-for="(item,index) in urlOptions"
                    :key="index"
                    :label="item.urlName"
                    :value="item"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="跳转地址" style="width: 100%" prop="latitude">
              <el-input v-model="form.url" placeholder="请输入跳转地址名称"/>
            </el-form-item>
          </el-col>
        </el-row>
        <div style="text-align: center">
          <el-button @click="submitForm">提交</el-button>
        </div>
      </div>
    </div>
  </div>

</template>

<script setup lang="ts">
import MapAddressSelect from "@/components/BMapAddressSelect/MapAddressSelect.vue";
import request from "@/utils/request"
import {onMounted, reactive, ref} from "vue";
import {ElMessage} from "element-plus";
const urlAddress = ref({})
const urlOptions = ref([])
const form = reactive({
  address: '',
  latitude: '',
  longitude: '',
  url: '',
  urlName: ''
})
const confirmMapAddress = (addressInfo) => {
  if (addressInfo.province !== undefined) {
    form.address = addressInfo.province + addressInfo.city + addressInfo.district + addressInfo.address
    form.latitude = addressInfo.latitude
    form.longitude = addressInfo.longitude
  }
};
onMounted(()=>{
  getUrlOption()
})
const submitForm = () => {
  try {
    request.post("/old-client/edit", form).then(res => {
      if (res.code === "200") {
        ElMessage.success("提交成功")
        form.url=''
        form.address=''
        form.latitude=''
        form.longitude=''
        form.urlName=''
      }
    })
  } catch (e) {
    ElMessage.error(e)
  }
}

const getUrlOption = () => {
  try {
    request.get("/old-client/allUrlName").then(res => {
      if (res.code === '200') {
        urlOptions.value = res.data
      }
    })
  }catch (e) {
    ElMessage.error(e)
  }
}

const productSelect = (e) => {
    if (e.urlName){
      form.urlName=e.urlName
    }
    if (e.url){
      form.url=e.url
    }
}
</script>

<style scoped>

</style>
